<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.warpdrive.js"></script>
<script type="text/javascript" src="libs/jquery.warpdrive.min.js"></script>

<style type="text/css">

.stage{
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 800px;
    transform-style: preserve-3d;
    
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    
}

.imgpic{
    position: absolute;
    transition: all 5s;
    left: 60%;
    top: 30%;
    opacity: 0.8;
    transform: translateZ(-5000px);
    animation: go 5s infinite linear;

}

#holder{
    position: absolute;
    width: 100%;
    height: 100%;

}
#bgpic{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-image: url('headimages/test4.jpg');
}

@keyframes go{
  100% {
    transform:translateZ(100px) translateX(-800px);
    }
}

/*.son:hover{
    transform: translateZ(200px);
}*/

</style>

</head>
<body>

    <div id='holder'></div>
    <div id='bgpic'></div>

    <div class="stage">
        <div class="container">
        </div>
    </div>


    <div style="left: 50%;position: absolute;">
        <button id="btstop">stop</button>
        <button id="btstart">start</button>
        <button id="btadd">add</button>
    </div>



</body>





<script type="text/javascript">

    var starwidth = $(window).width();
    var starheight = $(window).height();

    var settings = {

        width: starwidth,/*width*/
        height: starheight,/*height*/
        autoResize: false,/*enable/disable autoResize*/
        autoResizeMinWidth: null,/*set autoResize min width*/
        autoResizeMaxWidth: null,/*set autoResize max width*/
        autoResizeMinHeight: null,/*set autoResize min height*/
        autoResizeMaxHeight: null,/*set autoResize max height*/
        addMouseControls: false,/*enable/disable mouse controls*/
        addTouchControls: false,/*enable/disable touch controls*/
        hideContextMenu: true,/*enable/disable canvas context menu*/
        starCount: 6666,/*count of active/moving stars*/
        starBgCount: 2222,/*count of inactive/background stars*/
        starBgColor: { r:255, g:255, b:255 },/*background stars color*/
        starBgColorRangeMin: 10,/*background stars color range min of starBgColor*/
        starBgColorRangeMax: 40,/*background stars color range max of starBgColor*/
        starColor: { r:255, g:255, b:255 },/*stars color*/
        starColorRangeMin: 10,/*stars color range min of starBgColor*/
        starColorRangeMax: 100,/*stars color range max of starBgColor*/
        starfieldBackgroundColor: { r:0, g:0, b:0 },/*background color*/
        starDirection: 1,/*stars moving in which direction*/
        starSpeed: 10,/*stars moving speed*/
        starSpeedMax: 200,/*stars moving speed max*/
        starSpeedAnimationDuration: 2,/*time in seconds from starSpeed to starSpeedMax*/
        starFov: 300,/*field of view*/
        starFovMin: 200,/*field of view min*/
        starFovAnimationDuration: 2,/*time in seconds from starFov to starFovMin*/
        starRotationPermission: true,/*enable/disable rotation*/
        starRotationDirection: 1,/*rotation direction*/
        starRotationSpeed: 0.0,/*rotation speed*/
        starRotationSpeedMax: 1.0,/*rotation speed max*/
        starRotationAnimationDuration: 2,/*time in seconds from starRotationSpeed to starRotationSpeedMax*/
        starWarpLineLength: 2.0,/*line length*/
        starWarpTunnelDiameter: 100,/*tunnel diameter*/
        starFollowMouseSensitivity: 0.025,/*mouse follow sensitivity*/
        starFollowMouseXAxis: true,/*enable/disable mouse follow x axis*/
        starFollowMouseYAxis: true/*enable/disable mouse follow y axis*/

    };                

    var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );  

    var imagearray = [
    "headimages/1.jpg",
    "headimages/2.jpg",
    "headimages/3.jpg",
    "headimages/4.jpg",
    "headimages/5.jpg",
    "headimages/6.jpg",
    "headimages/7.jpg",
    "headimages/8.jpg",
    "headimages/9.jpg",
    "headimages/10.jpg",
    "headimages/11.jpg",
    "headimages/12.jpg"
    ];

    
    $('#btstart').click(function(event) {
        $('#imgone').css('transform', 'translateZ(100px)');
    });

    $('#btstop').click(function(event) {
        // $('.content').stop(false, true);
    });

    var j = 0;
    var z_index = 10000;
    $('#btadd').click(function(event) {
        var imgt;
        if(j < 12){
            imgt = $('<img src='+imagearray[j]+'>');
        }else{
            j = 0;
            imgt = $('<img src='+imagearray[j]+'>');
        }
        imgt.addClass('imgpic');
        imgt.css('z-index', ''+z_index);
        var axis = getRandomXY();
        imgt.css('left',axis.x+'%').css('top',axis.y+'%');

        $('.container').append(imgt[0]); 
        bindAnimation(imgt);     

        j++;
        z_index = z_index > 0 ? (z_index-10) : 10000; 
    });

    function bindAnimation(el) {
        // body...
        setTimeout(function () {
            // body...
            el.remove();
        },4800);
    }


    

    function getRandomXY () {
        var randomXY = {
            x:0,
            y:0
        };
        var leftRandom = Math.random() * 100;
        leftRandom = leftRandom > 90 ? leftRandom - (Math.random() * 10 + 5) : leftRandom;//[0,95]
        var topRandom = Math.random() * 100;
        topRandom = topRandom > 90 ? topRandom - (Math.random() * 10 +5) : topRandom;//[0,95]
        randomXY.x = leftRandom;
        randomXY.y = topRandom;
        return randomXY;
    }

</script>


</html>
